
<template>
	<div class="photoList">
		<!-- 顶部的滚动条 mui的scroll js -->
	<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a :class="['mui-control-item',item.id==0?'mui-active':''] " v-for="item in categoryList" :key="item.id" @click="getImages(item.id)">
            {{item.title}} 
        </a>
        
    </div>
</div>
	<!-- 图片展示区域 -->
	<div class="imgs-container">
	<ul>
		  <router-link v-for="item in imagesList" :key="item.id" :to="'/home/photoList/photoInfo/'+item.id" tag="li">
		    <img v-lazy="item.img_url">
		    <div class="desc">
				<h5 class="title">{{item.title}}</h5>
				<p class="content">{{item.zhaiyao}}</p>
			</div>
			</router-link>
			
		</ul>
	</div>
</div>
	

	
	
</template>
<style lang="scss" scoped>
	.photoList{
		.imgs-container{
			ul{
			list-style: none;
			padding:0px;
			margin:0px;
			li{
				position: relative;
				background-color: gray;
				margin:10px 0px;
				img{
				width: 100%;
				vertical-align: middle;

				}
				img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
			}
			// 设置图片正常显示的大小
				.desc{
					position: absolute;
					bottom: 0px;
					padding: 2px;
					width: 100%;
					max-height: 100px;
					line-height:1em;
					background-color: rgba(0,0,0,0.8);
					color: white;
					overflow: hidden;
					text-indent: 1em;
					.title{
						font-size: 14px;

					}
					.content{
						font-size: 12px;
					}
				}
			}
			
			
		}


			
			
		}
		
	}
</style>
<script type="text/javascript">
import  mui from'../../lib/mui-master/dist/js/mui.min.js'
	export default{
		data:function(){
			return {
				categoryList:[],
				imagesList:[],

			};
		},
		methods:{
			// 获取图片分类列表
			getCategoryList(){
				this.$http.get('api/getimgcategory').then(resault=>{
					if(resault.body.status==0)
					{
						resault.body.message.unshift({title:'全部', id:0})
						this.categoryList = resault.body.message;
					}
				});	
			},
			// 获取图片列表数据,需要传一个分类的id
			// 默认展示全部
			// 当点击某个分类的时候把分类id传给它
			getImages(cateid){
				this.$http.get('api/getimages/'+cateid).then(resault=>{
					if(resault.body.status==0)
					{
				
						this.imagesList = resault.body.message;
					}
				});	
			}
		},
		created:function(){
			this.getCategoryList();
			this.getImages(0);
		},
		mounted:function(){
		mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
		}

	
		
};
</script>